<template>
  <main>
    <div class="require-container">
      <div class="require-title">
        <span style="font-weight: 600; margin-left: 20px; margin-right: 20px">
          待评审列表
        </span>
      </div>
      <div class="require-body">
        <el-table stripe :data="tableData" style="width: 100%" height="250">
          <el-table-column fixed prop="reqType" label="需求类型" width="150">
          </el-table-column>
          <el-table-column prop="proName" label="项目名称" width="120">
          </el-table-column>
          <el-table-column prop="proType" label="工程类型" width="120">
          </el-table-column>
          <el-table-column prop="proCode" label="工程编码" width="120">
          </el-table-column>
          <el-table-column prop="bugType" label="采购类别" width="120">
          </el-table-column>
          <el-table-column prop="prePrice" label="估算价格" width="300">
          </el-table-column>
          <el-table-column prop="buyRange" label="采购范围" width="120">
          </el-table-column>
          <el-table-column prop="timeReq" label="工期需求" width="120">
          </el-table-column>
          <el-table-column prop="busReq" label="供应商需求" width="300">
          </el-table-column>
          <el-table-column prop="reqCause" label="需求原因" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="80">
            <template slot-scope="scope">
              <button
                @click="handleClick(scope.row)"
                class="shadow-button shinydarken"
                >评审</button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </main>
</template>

<script>
import { getWaitReviewAll } from "api/require.api";

export default {
  name: "requireManage",
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getReviewList();
  },
  methods: {
    // 获取所有待投标列表
    getReviewList() {
      const response = getWaitReviewAll();

      const { data, code, msg } = response;
      if (code !== 0) {
        this.$message.warning(msg);
        return;
      }

      this.tableData = data;
    },
    handleClick(row) {
      console.log(row);
      const route = "reviewDetail";
      this.$router.push({
        path: route,
        query: { id: row.id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.require-container { margin: 0 auto;
  max-width: 80vw;
  padding: 20px;
  .require-title {
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    .require-btn-group {
      ::v-deep {
        .el-button {
          margin-right: 20px;
        }
      }
    }
  }
  .require-body {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #fff;
  }
  ::v-deep {
    .el-table {
      height: 70vh !important;
    }
  }
}
</style>